<template>
  <div class="min-h-screen flex flex-col bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-lg sticky top-0 z-50">
      <div class="max-w-6xl mx-auto px-8">
        <div class="flex justify-between items-center py-4">
          <div class="flex items-center">
            <h1 class="text-2xl font-bold">我的博客</h1>
          </div>
          <div class="hidden md:flex space-x-8">
            <NuxtLink to="/" class="hover:text-yellow-300 transition-colors duration-300 px-4 py-2 rounded-md hover:bg-white hover:bg-opacity-10">
              首页
            </NuxtLink>
            <NuxtLink to="/blog" class="hover:text-yellow-300 transition-colors duration-300 px-4 py-2 rounded-md hover:bg-white hover:bg-opacity-10">
              文章
            </NuxtLink>
            <NuxtLink to="/about" class="hover:text-yellow-300 transition-colors duration-300 px-4 py-2 rounded-md hover:bg-white hover:bg-opacity-10">
              关于
            </NuxtLink>
            <NuxtLink to="/contact" class="hover:text-yellow-300 transition-colors duration-300 px-4 py-2 rounded-md hover:bg-white hover:bg-opacity-10">
              联系
            </NuxtLink>
          </div>
          <!-- 移动端菜单按钮 -->
          <div class="md:hidden">
            <button class="text-white hover:text-yellow-300">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="flex-1 py-8">
      <div class="max-w-6xl mx-auto px-8">
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
          <!-- 侧边栏 -->
          <aside class="lg:col-span-1">
            <div class="bg-white rounded-xl shadow-sm p-6 sticky top-24">
              <!-- 分类 -->
              <div class="mb-8">
                <h3 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b-2 border-indigo-500">
                  分类
                </h3>
                <ul class="space-y-2">
                  <li>
                    <NuxtLink to="/blog?category=技术" class="text-gray-600 hover:text-indigo-500 transition-colors duration-300 block py-2">
                      技术
                    </NuxtLink>
                  </li>
                  <li>
                    <NuxtLink to="/blog?category=前端" class="text-gray-600 hover:text-indigo-500 transition-colors duration-300 block py-2">
                      前端
                    </NuxtLink>
                  </li>
                  <li>
                    <NuxtLink to="/blog?category=JavaScript" class="text-gray-600 hover:text-indigo-500 transition-colors duration-300 block py-2">
                      JavaScript
                    </NuxtLink>
                  </li>
                  <li>
                    <NuxtLink to="/blog?category=Vue.js" class="text-gray-600 hover:text-indigo-500 transition-colors duration-300 block py-2">
                      Vue.js
                    </NuxtLink>
                  </li>
                </ul>
              </div>
              
              <!-- 最新文章 -->
              <div class="mb-8">
                <h3 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b-2 border-indigo-500">
                  最新文章
                </h3>
                <ul class="space-y-2">
                  <li v-for="post in latestPosts" :key="post.id">
                    <NuxtLink :to="`/blog/${post.slug}`" class="text-gray-600 hover:text-indigo-500 transition-colors duration-300 block py-2 line-clamp-2">
                      {{ post.title }}
                    </NuxtLink>
                  </li>
                  <li>
                    <NuxtLink to="/blog" class="text-gray-600 hover:text-indigo-500 transition-colors duration-300 block py-2">
                      更多文章 →
                    </NuxtLink>
                  </li>
                </ul>
              </div>

              <!-- 标签 -->
              <div>
                <h3 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b-2 border-indigo-500">
                  标签
                </h3>
                <div class="flex flex-wrap gap-2">
                  <NuxtLink to="/blog?tag=Vue.js" class="bg-indigo-500 text-white px-3 py-1 rounded-full text-sm cursor-pointer hover:bg-indigo-600 transition-colors duration-300">
                    Vue.js
                  </NuxtLink>
                  <NuxtLink to="/blog?tag=JavaScript" class="bg-indigo-500 text-white px-3 py-1 rounded-full text-sm cursor-pointer hover:bg-indigo-600 transition-colors duration-300">
                    JavaScript
                  </NuxtLink>
                  <NuxtLink to="/blog?tag=CSS" class="bg-indigo-500 text-white px-3 py-1 rounded-full text-sm cursor-pointer hover:bg-indigo-600 transition-colors duration-300">
                    CSS
                  </NuxtLink>
                  <NuxtLink to="/blog?tag=前端" class="bg-indigo-500 text-white px-3 py-1 rounded-full text-sm cursor-pointer hover:bg-indigo-600 transition-colors duration-300">
                    前端
                  </NuxtLink>
                  <NuxtLink to="/blog?tag=最佳实践" class="bg-indigo-500 text-white px-3 py-1 rounded-full text-sm cursor-pointer hover:bg-indigo-600 transition-colors duration-300">
                    最佳实践
                  </NuxtLink>
                </div>
              </div>
            </div>
          </aside>

          <!-- 页面内容 -->
          <div class="lg:col-span-3">
            <div class="bg-white rounded-xl shadow-sm p-8 min-h-[500px]">
              <slot />
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white mt-auto">
      <div class="max-w-6xl mx-auto px-8 py-8">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
          <div>
            <h4 class="text-indigo-400 text-lg font-semibold mb-4">关于我</h4>
            <p class="text-gray-300 leading-relaxed">
              热爱技术的前端开发者，喜欢分享知识和经验。
            </p>
          </div>
          <div>
            <h4 class="text-indigo-400 text-lg font-semibold mb-4">联系方式</h4>
            <p class="text-gray-300 mb-2">邮箱: 144075231@qq.com</p>
            <p class="text-gray-300">手机号和微信: 15302254544</p>
          </div>
          <div>
            <h4 class="text-indigo-400 text-lg font-semibold mb-4">友情链接</h4>
            <ul class="space-y-2">
              <li>
                <a href="#" class="text-gray-300 hover:text-indigo-400 transition-colors duration-300">
                  技术社区
                </a>
              </li>
              <li>
                <a href="#" class="text-gray-300 hover:text-indigo-400 transition-colors duration-300">
                  学习资源
                </a>
              </li>
              <li>
                <a href="#" class="text-gray-300 hover:text-indigo-400 transition-colors duration-300">
                  开源项目
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="text-center pt-4 border-t border-gray-700">
          <p class="text-gray-400">&copy; 2024 我的博客. All rights reserved.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
// 获取最新文章数据
const { data: postsData } = await useFetch('/api/posts', {
  query: {
    limit: 3,
    page: 1
  }
})

const latestPosts = computed(() => postsData.value?.posts || [])
</script> 